<template>
    <div class="app-container">
        <div class="warp_padding">   

            <div class="head-container">
                <!-- 搜索 -->
                <el-input v-model="formDate.name" clearable placeholder="输入名称搜索" style="width:160px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/>

                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
                <!-- 新增 -->
                <div style="display: inline-block;margin: 0px 2px;">
                  <el-button
                    v-if="checkPermission(['admin','menu_all','menu_select'])"
                    class="filter-item"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="add">新增</el-button>
                  <eForm ref="form" :is-add="isAdd"/>
                </div>

                <!-- <div style="display: inline-block;">
                  <el-button
                    class="filter-item"
                    size="mini"
                    type="warning"
                    icon="el-icon-more"
                    @click.native="Expand">{{ expand ? '折叠' : '展开' }}</el-button>
                  <eForm ref="form" :is-add="true"/>
                </div> -->
            </div>
            <!--表格渲染-->
            <el-table
                  :data="lists"
                  style="width: 100%;margin-bottom: 20px;"
                  row-key="id" v-loading="listLoading" :default-expand-all="expand">
               
                <el-table-column prop="name" label="名称" min-width="180"  max-width="200" sortable></el-table-column>
                
                <el-table-column prop="icon" label="图标"  min-width="50">
                    <template slot-scope="scope">
                        <svg-icon :icon-class="scope.row.icon" />
                    </template>
                </el-table-column>
                
                <el-table-column prop="sort" align="center"  label="排序">
                    <template slot-scope="scope">
                        <el-tag>{{ scope.row.sort }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="path" label="链接地址"  min-width="100"></el-table-column>
                <el-table-column prop="component" label="组件路径" min-width="180" ></el-table-column>

                <el-table-column prop="isDisable" label="状态"   sortable>
                     <template slot-scope="scope">
                        <el-tag :type="scope.row.isDisable ? 'danger' : 'success'">{{ scope.row.isDisable ? '禁用' : '启用' }}</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column prop="addTime" label="创建日期" :show-overflow-tooltip="true"   v-if="device!=='mobile'">
                    <template slot-scope="scope">
                      <span>{{scope.row.addTime | formatDate}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="150" >
                    <template slot-scope="scope">
                        <el-button type="success" size="mini"  v-if="checkPermission(['admin','menu_all','menu_edit'])" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
                        <el-button type="danger" size="mini" v-if="checkPermission(['admin','menu_all','menu_del'])" @click="handleDel(scope.$index, scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--工具条-->
        <!-- <el-col :span="24" class="toolbar">
            <el-button type="danger" size="mini" @click="batchRemove" :disabled="this.sels.length===0" class="remove">批量删除</el-button>

            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col> -->

    </div>
</template>


<script>
import { formatDate } from '@/utils/formatDate.js';
import checkPermission from '@/utils/permission' 
import initData from '@/mixins/initData'
import { del, menusList, delBatch } from '@/api/menu'
import { parseTime } from '@/utils/index'
import eForm from './module/form'
import { mapGetters } from 'vuex'

export default {
  components: {eForm},
  mixins: [initData],
  computed: {
        ...mapGetters([
          'device'
        ])
  },
  data() {
    return {
        expand:false,
        columns: [
            {
              text: '名称',
              value: 'name'
            }
        ],
        delLoading: false,

        pageCount: 0,
        total:0,  //总数
        listLoading: false,
        lists: [],
        pagerCount:11,   //页码按钮的数量，当总页数超过该值时会折叠,大于等于 5 且小于等于 21 的奇数
        formDate:{
            pageNo: 1,  
            pageSize:200,
            permissionGrade:1,
            name:''   
        },
        isAdd:true,
        editForm:{}
        
    }
  },
  created() {
    this.$nextTick(() => {
        this.init()
    })
  },
  filters: {
        formatDate(time) {
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }, 
  },
  methods: {
    parseTime,
    checkPermission,
    beforeInit() {
        return true
    },
    toQuery(){
        if (this.formDate.name) {
            menusList(this.formDate).then(res => {
                if (res.code ==2000) {
                   let { list, total } = res.data
                   this.lists = list
                   return
                }else{
                    this.$message({
                        message: '服务器错误！获取数据失败',
                        type: 'error'
                    });
                }
            })
        }else{
            this.lists = []
            this.init()
        }
    },
    add(){
        this.isAdd = true
        this.$refs.form.getMenus()
        this.$refs.form.form = { 
            icon: '',name: '', sort: 1, path: '', isDisable:0, component: '',  pid: -2, permissionGrade: '1',
        },
        this.$refs.form.dialog = true
    },
    handleCurrentChange(val) {
        this.formDate.pageNo = val;
        this.init()
    },
    handleSizeChange(val) {
        this.formDate.pageSize = val
        this.init()
        // console.log(`page ${val}`);
    },
    handleEdit: function (index, row) {
        this.$refs.form.dialog = true
        this.isAdd = false
        this.$refs.form.getMenus()
        this.$refs.form.form = Object.assign({}, row);
    },
    handleDel(index,ID){
        let ids = [];
        ids.unshift(ID)
        this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    delBatch(ids).then(res => {
                        if (res.code == '2000' || 2000) {
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.init();
                        }else{
                            this.listLoading = false;
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
                   
                }).catch(() => {
        });
    },
    Expand() {
      console.log(!this.expand)
      // this.expand = !this.expand
      // this.init()
        
    }
    
  }
}
</script>

<style lang="scss" scoped>

</style>
